<!-- 时间选择组件 -->
<template>
	<view class="dateSelectBox">
		<view class="dateSelect" @click.stop="show = true">
			<text class="text">{{date}}</text>
			<uni-icons type="bottom" size="28rpx" color="#333"></uni-icons>

		</view>

		<!-- 弹出层 -->
		<u-datetime-picker :show="show" v-model="value1" :closeOnClickOverlay="true" itemHeight="88" mode="year-month"
			@cancel="timeClose" @close="timeClose" @confirm="timeConfirm"></u-datetime-picker>
	</view>


</template>

<script>
	export default {
		props: {
			// 时间选择返回值
			submit: {
				type: Function,
				default: () => {}
			},
			
			/**
			 * 是否穿透
			 */
			setDateSelectShow:{
				type:Function,
				default: ()=>{}
			}
		},
		data() {
			return {
				date: '全部', // 时间

				show: false,
				value1: Number(new Date()),
			};
		},
		watch:{
			show(){
				this.$emit('setDateSelectShow',this.show)
			}
		},
		methods: {

			/**
			 * 初始化时间
			 */
			timeInit(val) {
				console.log(val.getFullYear() + '年' + (val.getMonth() + 1) + '月', '初始化时间');
				return val.getFullYear() + '年' + (val.getMonth() + 1) + '月';
			},

			/**
			 * 关闭时间选择
			 */
			timeClose() {
				this.show = false
			},

			/**
			 * 时间确定
			 */
			timeConfirm(val) {
				//回显
				this.date = this.timeInit(new Date(val.value))

				// 返回父组件值
				this.timeConfirmInit(val.value)

				//关闭弹出层
				this.timeClose()

			},

			/**
			 * 处理返回时间
			 */
			timeConfirmInit(val) {
				let time = new Date(val)
				
				function monthInit(val){					
					return val<10 ? '0'+val : val
				}

				// 开始时间
				let startTime = time.getFullYear() + '-' + (monthInit(time.getMonth() + 1)) + '-01' + " 00:00:00"
				
				//结束时间
				let endTime = ''
				
				// 当时间是12月时
				if(time.getMonth() + 2 >12){
					endTime = time.getFullYear() + '-' + (time.getMonth() + 1) + '-31' + " 23:59:59"
				}
				
				// 当时间小于12月
				if(time.getMonth()+2 <= 12){
					// 开始时间+1月
					let time2 = time.getFullYear() + '-' + (time.getMonth() + 2) + '-01' + " 00:00:00"
					// 开始时间+1月再减去1秒钟
					let time3 = new Date(new Date(time2).setSeconds(new Date(time2).getSeconds() - 1))
					
					// 将时间转换,结束时间
					endTime = time3.getFullYear() + '-' + (monthInit(time3.getMonth() + 1))+ '-' + time3.getDate() + " " + time3
						.getHours() + ":" + time3.getMinutes() + ":" + time3.getSeconds()
					
				}

				this.$emit('submit', {
					startTime,
					endTime
				})
			}
		},

	}
</script>

<style lang="less" scoped>
	.dateSelectBox {
		#box(100%);
		#flex(-, flex-start, center);
		#padding(0 0 0 32rpx);

		.text {
			#font(32rpx, #0f0d21);
			margin-right: 8rpx;
		}
	}
</style>